<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://baidu.com" id="" name="" method="post">
			<div>
				<!-- lable和input都是内联元素，inline -->
				<!-- label的for属性要和 input的 id值一样，这样点击label里面的文字就会让输入框获得焦点 -->
				<label for="username">账号：</label>
				<input id="username" name="username">
			</div>
			<div>
				<!-- autofocus 自动获取焦点 -->
				<label for="password">密码：</label>
				<input id="password" type="password" autofocus>
			</div>
			<div>
				<fieldset id="">
					<legend>性别</legend>
					<!-- 要实现单选，必须给所有单选输入框设置同样的name -->

					<label for="male">男</label><input id="male" type="radio" name="gender">
					<label for="female">女</label><input id="female" type="radio" name="gender">
					<label for="seceret">保密</label><input disabled=true id="seceret" type="radio" name="gender">

				</fieldset>

			</div>
			<div>
				<fieldset id="">
					<!-- 为了让数据成组，所有复选框设置同样的name -->
					<!-- 爱好类全部input name=favor，目的是让数据成组 -->
					<legend>爱好</legend>
					<label for="sing">唱</label><input id="sing" type="checkbox" name="favor">
					<label for="dance">跳</label><input id="dance" type="checkbox" name="favor">
					<label for="rap">rap</label><input id="rap" type="checkbox" name="favor">
					<label for="basketball">篮球</label><input id="basketball" type="checkbox" name="favor">
				</fieldset>
				<fieldset id="">
					<!-- 
					水果类全部 input name=fruit
					 -->
					<legend>水果</legend>

					<label for="banana">香蕉</label><input id="banana" type="checkbox" name="fruit">
					<label for="lizhi">荔枝</label><input id="lizhi" type="checkbox" name="fruit">
					<label for="mangguo">芒果</label><input id="mangguo" type="checkbox" name="fruit">
					<label for="caomei">草莓</label><input id="caomei" type="checkbox" name="fruit">
				</fieldset>
			</div>
			<div>
				<input type="file">
			</div>
			<div>
				<input type="button" value="按钮"><br>
				<!-- button在form里面或默认成提交 -->
				<button>提交</button><br>
				<!-- submit按钮，提交整个表单到后台 ，默认按钮里面的文字是提交，可以通过value进行自定义修改-->
				<input type="submit" value="注册"><br>
				<!-- reset 按钮，会清空所有表单数据，可以通过value修改按钮默认内容 -->
				<input type="reset" value="清除"><br>
				<!-- 图标按钮，scr属性填写图片地址 -->
				<input type="image" src="img/search.png" name="" id="" value="" />
			</div>
			<div>
				<lable>被隐藏的输入框</lable>
				<!-- 被隐藏的内容，在防止跨域攻击会使用 -->
				<input type="hidden" value="">
			</div>
			<div>
				<!-- 主要用在表单验证，会验证输入内容是否是一个格式正确email -->
				<label>Email:</label>
				<input type="email">

			</div>
			<div>
				<!-- 主要用在表单验证，会验证输入内容是否是一个格式正确email -->
				<label>Url:</label>
				<input type="url">

			</div>
			<div>
				<!-- 在谷歌浏览器，输入框右边会有一个x -->
				<label>搜索:</label>
				<input type="search">

			</div>
			<div>
				<lable>number</lable>
				<!-- max最大值，min最下值，stepy一次增加或减少的值 -->
				<input type="number" max="20" min="3" step="2">
			</div>
			<div>
				<input type="tel">
			</div>
			<div><input type="range"></div>
			<div><input type="date"></div>
			<div><input type="month"></div>
			<div><input type="time"></div>
			<div><input type="color"></div>
			<div>
				<label>昵称</label><input type="text" value="葬爱家族" disabled=true>
			</div>
			<textarea rows="20" cols="100" autocapitalize="words" disabled=true>

			</textarea>
			<br>
			<label>英雄联盟被称为法术机关枪的英雄是：</label>
			<!-- size显示的选项的数量 -->
			<select multiple size="2">
				<option value="皎月女神·戴安娜">皎月女神·戴安娜</option>
				<option value="符文法师·瑞">符文法师·瑞兹</option>
				<option value="机械先驱·维克托">机械先驱·维克托</option>
				<option value="暗黑元首·辛德拉">暗黑元首·辛德拉</option>
				<option value="远古巫灵·泽拉斯">远古巫灵·泽拉斯</option>
			</select>
			<br>
			<label>HenrryLee's 菜谱：</label>
			<select multiple size="20">
				<optgroup label="特色菜">
					<option value="苦瓜烧鸭">苦瓜烧鸭</option>
					<option value="泡椒鲫鱼">泡椒鲫鱼</option>
					<option value="油爆大肠">油爆大肠</option>
					<option value="藿香排骨">藿香排骨</option>
				</optgroup>
				<optgroup label="凉菜">
					<option value="手拍黄瓜">手拍黄瓜</option>
					<option value="蒜泥白肉">蒜泥白肉</option>
					<option value="凉拌三丝">凉拌三丝</option>
				</optgroup>
				<optgroup label="汤类">
					<option value="紫菜蛋花汤">紫菜蛋花汤</option>
					<option value="白菜豆腐汤">白菜豆腐汤</option>
					<option value="萝卜玉米汤">萝卜玉米汤</option>
				</optgroup>
			</select>
			<button>测试buttond的提交</button>
			<input type="submit" value="注册">
			<br>
			<!-- input 的list值要对应到数据内容 datalist 的id -->
			<input type="text" placeholder="请选择/输入您喜欢的城市：" size="25" list="citys">
			<br>
			<datalist id="citys">
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="成都">成都</option>
				<option value="香港">香港</option>
				<option value="厦门">厦门</option>
				<option value="昆明">昆明</option>
				<option value="大理">大理</option>
			</datalist>

		</form>
		<button id="btn">测试buttond的提交</button>
		<script type="text/javascript">
			let btn = document.getElementById('btn');
			btn.onclick = function() {
				alert('点击了我')
			}
		</script>

		<form name="myForm" action="javascript:(void);" method="POST" target="_blank" oninput="result.value = parseInt(rangeIpt.value)">
			<label>0</label>
			<input type="range" id="rangeIpt" min="0" max="100" value="0">
			<label>100</label>

			<label>您选择的值为：</label>
			<output for="rangeIpt" name="result">0</output>
		</form>
		
		<form name="myForm" action="javascript:(void);" method="POST" target="_blank" oninput="result.value = '欢迎来自' + areaIpt.value + '的' + levelIpt.value + '大神光临本网咖！'">
			<label>大区：</label>
			<input type="text" id="areaIpt"><br>

			<label>段位：</label>
			<input type="text" id="levelIpt"><br><br>

			<output name="result" for="areaIpt levelIpt">?</output>
		</form>
	</body>
</html>
